<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Sinwa图片直播 - 登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<meta content="email=no" name="format-detection" />
	<link rel="stylesheet" type="text/css" href="/static/chat/assert/css/reset.css" />
	<link rel="stylesheet" type="text/css" href="/static/chat/assert/css/main.css" />
	<link rel="stylesheet" href="/static/chat/assert/iconfont/iconfont.css">
	<link rel="shortcut icon" href="/static/chat/favicon.ico">
	<script src="/static/chat/js/jquery-3.3.1.min.js"></script>
	<style>
		body {
			background: #eee;
		}
		.login {
			text-align: center;
			margin-top: 8vh;
			padding: 20px;
		}
		.login h2 {
			font-size: 1.2rem;
			margin-bottom: 1rem;
		}
		.login-item {
			font-size: 0;
			background: #fff;
			padding-left: 1rem;
			border: 1px solid #eee;
		}
		/*避免两个输入框间的border重叠*/
		.login-item:last-child {
			border-top: 0;
		}
		input, button {
			width: 100%;
			border: none;
			outline: none;
			height: 50px;
			line-height: 50px;
			font-size: 1.2rem;
			color: #333;
			background: transparent;
		}
		.phone-num {
			width: 70%;
		}
		/*获取验证码的button*/
		.login-item button {
			width: 30%;
			padding: 0 10px;
			background: none;
			color: inherit;
			display: inline-block;
			background: ghostwhite;
			border-left: 1px solid #eee;
		}
		.submit-btn {
			background: #00a1d6;
			width: 100%;
			color: #fff;
			margin-top: 30px;
		}

	</style>
</head>

<body>
	<header class="header xxl-font">
		<i class="icon iconfont icon-fanhui back" id="back"></i>
		登录
	</header>
	<form class="login" id="form">
		<h2>singwa体育赛事图文直播平台</h2>
		<div class="login-item">
			<input type="text" placeholder="手机号" class="phone-num" name="phone_num"/>
			<button type="button" id="authCodeBtn">验证码</button>
		</div>
		<div class="login-item">
			<input type="text" placeholder="验证码" name="code" />
		</div>
		<button type="submit" class="submit-btn" id="submit-btn">进入平台</button>
	</form>
	<script>
		$(function () {
			var $back = $('#back');
			var $submitBtn = $('#submit-btn');
			// 获取验证吗
		  $('#authCodeBtn').click(function (event) {

			    var phone_num = $(" input[ name='phone_num' ] ").val()
				url = "http://rainf.gzwuzhi.cn:9501?s=index/login&phone_num="+phone_num;
				$(this).html('已发送').attr('disabled', true);
				// $.post()
				$.get(url, function (data) {
					// TODO: 将下面3行代码删除
					if (data.status == 'ok') {
						alert('发送完成');
					}
					// if (result.status != 'ok') {
					// 	alert('网络错误');
					// }
				});
			});

			// 提交表单
			$submitBtn.click(function (event) {
				event.preventDefault();
				var formData = $('form').serialize();
				// TODO: 请求后台接口跳转界面，前端跳转或者后台跳
				$.get("https://www.easy-mock.com/mock/5ab1188bddac7967e4398146/example/query?"+formData, function (data) {
					console.log("https://www.easy-mock.com/mock/5ab1188bddac7967e4398146/example/query?" + formData);
					// location.href='index.html';
				});
			});

			// 返回上一页
			$back.click(function (e) {
				window.history.back();
			});
		});
	</script>
</body>

</html>